<template>
	<div>
		<mt-header :title='coursename+"错题本"' class="heade" style="background-color: #FA8C13;">
			<mt-button slot="right">{{ index }}/{{ questionDataList.length }}题</mt-button>
		</mt-header>
		<div class="content clearfix">
			<mt-swipe @change="handleChange" :auto="0" :showIndicators="false">
  			<mt-swipe-item v-for="item in questionDataList">
  				<p>{{ item.content }}</p>
  				<p>{{ item.answer}}</p>
  				<p>正确答案：{{ item.rightAnswer }}    我的答案：{{ item.myAnswer }}</p>
  				<p>解析：</p>
  				<p>{{ item.detail }}</p>
  			</mt-swipe-item>
		</mt-swipe>
		</div>
		<div class="foot">巩固练习</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				courseid:'',
				coursename:'数学',
				index:1,
				questionDataList:[
				]
			}
		},
		created(){
			
		},
		methods:{
			 handleChange(index) {
    			this.index=index+1
  			}
		},
		mounted(){
			var s=document.getElementsByClassName('mint-swipe-item')[0];
			var contentBox=document.getElementsByClassName('content')[0];
			contentBox.style.height=s.offsetHeight+'px'
		}
	}
</script>

<style scoped>
	.heade{
		background: #14ACF4;
	}
	.foot{
		background: #1382FA;
box-shadow: 0 0 2px 0 rgba(0,0,0,0.30);
height: 49px;
font-size: 16px;
color: #FFFFFF;
letter-spacing: -0.34px;
text-align: center;
line-height:49px;
position: fixed;
bottom: 0;
width: 100%;
	}
	.content{
		font-size: 14px;
		height: 100px;
		overflow: scroll;
	}
	.clearfix{
		overflow:hidden;
		zoom:1;
	}
	.clearfix:after{
		content:".";
		display:block;
		height:0;
		clear:both;
		visibility:hidden;
		}
</style>